<template>
	<view class="home">
		<uni-nav-bar title="衡朗售后"></uni-nav-bar>
		<view class="logo-content">
			<image src="/static/images/logo.jpeg" class="image" />
			</image>
		</view>
		<view class="list-content">
			<view class="grid-body">
				<view class="grid-item-box" v-for="(item,index) in list" :key="index" @click="changeGrid(item)">
					<image class="grid-item-img" mode="widthFix" :src="item.icon"></image>
					<text class="grid-item-text">{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				list: [{
					type: 1,
					icon: '/static/images/yunying.png',
					title: '品牌运营人员',
					page: '/pages/login'
				}, {
					type: 2,
					icon: '/static/images/mendian.png',
					title: '门店负责人',
					page: '/pages/login'
				}, {
					type: 3,
					icon: '/static/images/weixiu.png',
					title: '维修师傅',
					page: '/pages/login'
				}, {
					type: 4,
					icon: '/static/images/pingtai.png',
					title: '平台运营端',
					page: '/pages/login'
				}]
			}
		},
		methods: {
			changeGrid(e) {
				uni.navigateTo({
					url: `${e.page}?roleType=${e.type}`,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		height: 100vh;
		background-color: linear-gradient(180deg, #E0EDFF, #E0EDFF, #FFFFFF);
		padding: 30rpx;
	}

	.logo-content {
		padding: 30rpx 0;

		.image {
			width: 690rpx;
			height: 280rpx;
			margin: auto;
		}
	}

	.list-content {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 60rpx 0rpx 100rpx 38rpx;
		box-shadow: 0px 12px 76px 0px rgba(59, 126, 251, 0.19);

		.grid-body {
			display: flex;
			flex-wrap: wrap;
		}

		.grid-item-box {
			display: flex;
			align-items: center;
			width: 286rpx;
			height: 115rpx;
			background: #EBF2FF;
			border-radius: 18rpx;
			margin-right: 39rpx;
			margin-bottom: 30rpx;

			.grid-item-img {
				width: 56rpx;
				height: 56rpx;
				margin-right: 20rpx;
				margin-left: 30rpx;
			}

			.grid-item-text {
				text-align: center;
				font-size: 28rpx;
				color: #2E3C53;

			}
		}
	}
</style>